<!-- 文化列表 -->
<template>
  <view class="container">
    <view class="header">
      <uni-icons type="arrowleft" size="24" color="#333" @tap="goBack"></uni-icons>
      <text class="header-title">{{ culturalItem.title }}</text>
    </view>

    <scroll-view scroll-y="true" class="content">
      <image :src="culturalItem.imageUrl" mode="aspectFill" class="banner-image"/>

      <view class="section">
        <text class="section-title">简介</text>
        <text class="section-content">{{ culturalItem.description }}</text>
      </view>

      <view class="section" v-if="culturalItem.fullContent.history">
        <text class="section-title">历史背景</text>
        <text class="section-content">{{ culturalItem.fullContent.history }}</text>
      </view>

      <view class="section" v-if="culturalItem.fullContent.process">
        <text class="section-title">制作过程</text>
        <view class="process-list">
          <view class="process-item" v-for="(step, index) in culturalItem.fullContent.process" :key="index">
            <text class="process-step">{{ index + 1 }}. {{ step }}</text>
          </view>
        </view>
      </view>

      <view class="section" v-if="culturalItem.fullContent.features">
        <text class="section-title">特点</text>
        <text class="section-content">{{ culturalItem.fullContent.features }}</text>
      </view>

      <view class="section" v-if="culturalItem.fullContent.significance">
        <text class="section-title">意义</text>
        <text class="section-content">{{ culturalItem.fullContent.significance }}</text>
      </view>

      <view class="section" v-if="culturalItem.fullContent.masters">
        <text class="section-title">传承人</text>
        <view class="master-list">
          <view class="master-item" v-for="(master, index) in culturalItem.fullContent.masters" :key="index">
            <text class="master-name">{{ master.name }}</text>
            <text class="master-title">{{ master.title }}</text>
            <text class="master-achievement">{{ master.achievement }}</text>
          </view>
        </view>
      </view>

      <view class="section" v-if="culturalItem.fullContent.introduction">
        <text class="section-title">介绍</text>
        <text class="section-content">{{ culturalItem.fullContent.introduction }}</text>
      </view>

      <view class="section" v-if="culturalItem.fullContent.performanceElements">
        <text class="section-title">表演要素</text>
        <view class="performance-list">
          <view class="performance-item" v-for="(element, index) in culturalItem.fullContent.performanceElements" :key="index">
            <text class="performance-element">{{ element }}</text>
          </view>
        </view>
      </view>

      <view class="section" v-if="culturalItem.fullContent.regionalStyles">
        <text class="section-title">{{ culturalItem.fullContent.regionalStyles.title }}</text>
        <view class="regional-list">
          <view class="regional-item" v-for="(content, index) in culturalItem.fullContent.regionalStyles.content" :key="index">
            <text class="regional-content">{{ content }}</text>
          </view>
        </view>
      </view>

      <view class="section" v-if="culturalItem.fullContent.modernDevelopment">
        <text class="section-title">现代发展</text>
        <text class="section-content">{{ culturalItem.fullContent.modernDevelopment }}</text>
      </view>

      <view class="section" v-if="culturalItem.fullContent.educationalValue">
        <text class="section-title">教育价值</text>
        <text class="section-content">{{ culturalItem.fullContent.educationalValue }}</text>
      </view>
    </scroll-view>
  </view>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import shuju from '../../../shuju.json';

interface CulturalItem {
  id: number;
  title: string;
  description: string;
  fullContent: {
    history?: string;
    process?: string[];
    features?: string;
    significance?: string;
    masters?: {
      name: string;
      title: string;
      achievement: string;
    }[];
    introduction?: string;
    performanceElements?: string[];
    regionalStyles?: {
      title: string;
      content: string[];
    };
    modernDevelopment?: string;
    educationalValue?: string;
  };
  imageUrl: string;
}

const culturalItems = ref<CulturalItem[]>(shuju.culturalItems);
const culturalItem = ref<CulturalItem>({} as CulturalItem);

const getCulturalItemById = (id: number) => {
  return culturalItems.value.find(item => item.id === id) || culturalItems.value[0];
};

const goBack = () => {
  uni.navigateBack();
};

onMounted(() => {
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  const options = currentPage.options;
  const id = parseInt(options.id || '1', 10);
  culturalItem.value = getCulturalItemById(id);
});
</script>

<style lang="scss">
page {
  height: 100%;
  background-color: #f7f7f7;
}

.container {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.header {
  display: flex;
  align-items: center;
  padding: 24rpx 30rpx;
  background-color: #fff;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  margin-left: 20rpx;
}

.content {
  flex: 1;
  padding: 30rpx;
}

.banner-image {
  width: 100%;
  height: 400rpx;
  border-radius: 16rpx;
  margin-bottom: 30rpx;
}

.section {
  margin-bottom: 40rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 20rpx;
  display: block;
}

.section-content {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
}

.process-list, .master-list, .performance-list, .regional-list {
  padding-left: 40rpx;
}

.process-item, .master-item, .performance-item, .regional-item {
  margin-bottom: 16rpx;
}

.process-step, .performance-element, .regional-content {
  font-size: 28rpx;
  color: #666;
}

.master-name {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
  display: block;
}

.master-title {
  font-size: 26rpx;
  color: #666;
  display: block;
}

.master-achievement {
  font-size: 26rpx;
  color: #888;
  display: block;
}
</style>